<template>
  <div class="vl-box">
    <div class="vl-left">
      <div class="vl-left-title"></div>
      <div class="vl-comps">
        <div class="vl-comp vl-comp-input"  
        v-for="(comp, key) in comps"
        :key="key"
        :data-type="key"
        draggable="true" 
        @dragstart="dragStart($event, key)" @dragend="dragEnd">
          <div>
            <img :src="require('../assets/' + key + '.png')" :alt="comp.name" />
            </div>
          <div>{{comp.name}}</div>
        </div>

      </div>
    </div>
    <div class="vl-center"  @dragover="dragOver" @drop="drop($event, '1', null)" >
      <div class="vl-preview-item" v-for="(row, index) in data" :key="index" :class="curIndex === index?'active':''" @click="dblclick(index)" @drop="drop($event, '2', index)" >
        <fw-row>
        <div class="title">{{row.title}}</div>
        <component 
        :is="'fw-' + row.type" 
        :placeholder="row.placeholder"
        :list="row.list">
        </component>
        </fw-row>
      </div>
    </div>
    <div class="vl-right">
      <fw-row>
        <div class="title">标题</div>
        <fw-input v-model="editObj.title" @input="change('title')"/>
      </fw-row>
      <fw-row>
        <div class="title">placeholder</div>
        <fw-input v-model="editObj.placeholder" @input="change('placeholder')"  />
      </fw-row>
      <fw-row v-show="editObj.type === 'select' || editObj.type === 'radio'">
        <div class="title">下拉选项</div>
        <fw-row v-for="row in editObj.list" :key="row.value">
          <fw-row>
          <div class="title">值</div>
          <fw-input v-model="row.value" @input="change('list')"></fw-input>
        </fw-row>
        <fw-row>
          <div class="title">文本</div>
          <fw-input v-model="row.text" @input="change('list')"></fw-input>
        </fw-row>
         <div @click="addEditObjList"><img src="../assets/add.png" alt=""></div>
        </fw-row>
        
      </fw-row>
    </div>
    
  </div>
</template>

<script>
import 'vue3-ts-flow-components/static/index.css'
import { reactive, ref } from '@vue/reactivity';
import {FwInput,FwSelect, FwRadio,FwRow } from 'vue3-ts-flow-components'

export default {
  name: 'HelloWorld',
  components: {
    "fw-input": FwInput,
    "fw-select": FwSelect,
    'fw-radio': FwRadio,
    'fw-row': FwRow,
  },
  setup(){
    const comps = {
      input : {
        name: '输入框/文本框',
        icon: '../assets/input.png'
      },
      select: {
        name: '下拉框',
         icon: '../assets/select.png'
      },
      radio: {
        name : '单选框',
         icon: '../assets/name.png'
      },
     
    }

    function dragStart(e, type){
      e.dataTransfer.setData('text/plain', type);
    }

    function dragOver(e){
      e.preventDefault()
    }

    function dragEnd(){
      
    }

    let curIndex = ref( 0)
    const data = reactive([])
    function drop(e, flag, index){
      // flag 1：拖拽的结束位置为画布的空白区域; 2：拖拽的结束位置为画布上的某一个元素
       const type = e.dataTransfer.getData("text/plain");
       const newObj = {type: type}
      if(flag == 2){
         data.splice(index, 0, newObj)
          dblclick(index)
      }else{
          data.push(newObj)
          dblclick(data.length - 1)
      }

      e.preventDefault() // 阻止模式行为
      e.stopPropagation()  // 阻止冒牌

    }

    
    function dblclick(index){
       curIndex.value = index
       const row = data[curIndex.value]
       editObj.type = row.type
       editObj.title = row.title
       editObj.placeholder = row.placeholder
       editObj.list = row.list?row.list: [{value:'', text:''}]
    }

    const editObj = reactive({
      type: '',
      title: '',
      placeholder : '',
      list: [
        {value:'', text:''}
      ]
    })

    function change(type){
       data[curIndex.value][type] = editObj[type]
    }

    function addEditObjList(){
      editObj.list.push({value:'', text:''})
    }

    return {
      comps,
      dragStart,
      dragOver,
      dragEnd,
      drop,
      dblclick,
      change,
      addEditObjList,
      data,
      curIndex,
      editObj
    }
  }
}
</script>

<style scoped>
.vl-box{
  display: flex;
  justify-content: space-between;
}
.vl-left, .vl-center, .vl-right{
  height: 100vh;
  padding: 10px;
}
.vl-left{
  flex-basis: 200px;
  border-right: 1px solid #ddd;
}
 .vl-right{
  flex-basis: 300px;
  border-left:1px solid #ddd;
}
.vl-center{
  flex: 1;
  position: relative;
  padding: 10px;
}
.vl-comps{
  display: flex;
  flex-wrap: wrap;
}
.vl-comps .vl-comp{
  width: 100px;
  font-size: 14px;
  text-align: center;
  height: 80px;
}
.vl-comps img{
  width: 30px;
}
.vl-preview-item{
  padding: 10px;
}
.vl-preview-item.active{
  border:2px solid #b3e19d;
}
</style>
